CSS opacity based on prefers-reduced-transparency media query
#30999
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Preview URLs (comment last updated: 2023-12-15 14:43:41) |
|
@chrisdavidmills, this PR is similar to #30712. |
estelle
reviewed
Dec 14, 2023
There was a problem hiding this comment.
I suggested 1) edits to see also and 2) moving the mention from the description section to the a11y section.
I am not sure if you want to expand on this PR or if we should open an issue, but this page could use some work completely unrelated to the PRT issue.
Stuff i would love to see
- Even though the element is not visible, it is still part of the DOM. If it was in the tabindex order when visible it will still be there. We do mention pointer events. But we should tell people to make the content visible when focused.
- Opacity alone should not be used to provide information to screen readers. Use the
hiddenattribute orvisibilityordisplaystyle properties. It's best to avoid usingaria-hiddenattribute, but if hidden with opacity, hide it from screen readers too. - a mention of setting opacity as a value for @starting-style when transitioning from display none to a visible value.
- a comment in the stacking context paragraph about how adding opacity can improve perf, with a link to where that's described.
- maybe a link to a drag/drop example as opacity is commonly used on items being dragged.
Co-authored-by: Estelle Weyl <[email protected]>
|
@estelle I prefer no to expand this PR. |
Tenkir
pushed a commit
to Tenkir/content
that referenced
this pull request
Dec 22, 2023
…n#30999) * CSS `opacity` based on `prefers-reduced-transparency` media query * Apply suggestions from code review Co-authored-by: Estelle Weyl <[email protected]> * update --------- Co-authored-by: Estelle Weyl <[email protected]> S
Tenkir
pushed a commit
to Tenkir/content
that referenced
this pull request
Dec 22, 2023
…n#30999) * CSS `opacity` based on `prefers-reduced-transparency` media query * Apply suggestions from code review Co-authored-by: Estelle Weyl <[email protected]> * update --------- Co-authored-by: Estelle Weyl <[email protected]> S
dipikabh
pushed a commit
to dipikabh/content
that referenced
this pull request
Jan 17, 2024
…n#30999) * CSS `opacity` based on `prefers-reduced-transparency` media query * Apply suggestions from code review Co-authored-by: Estelle Weyl <[email protected]> * update --------- Co-authored-by: Estelle Weyl <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Add an example that demonstrates how to use the
prefers-reduced-transparencymedia query to specify the desiredopacitybased on the user's preferences.